<template>
  <div class="big-img">
    <div v-if="showMask" class="big-img-bg" @click.stop="close"/>
    <div class="big-img-main" @click.stop="close">
      <img :style="imgStyle" :src="imgSrc" alt="查看大图">
    </div>
  </div>
</template>
<script>
/*
* 查看大图组件
*/
export default {
  props: {
    showMask: {
      type: Boolean,
      default: true
    },
    imgSrc: {
      type: String,
      default: ''
    },
    imgStyle: {
      type: Object,
      default: () => {
        return {
          maxHeight: '600px',
          maxWidth: '900px'
        };
      }
    }
  },
  data() {
    return {
      isShow: false
    };
  },
  methods: {
    close() {
      this.$emit('closed');
    }
  }
};
</script>
<style lang="scss" scoped>
.big-img {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2020;
  &-bg {
    z-index: 2018;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.2);
  }
  &-main {
    position: absolute;
    z-index: 2019;
    background-color: #ffffff;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
  }
}
</style>
